<template>
  <div
    class="card"
    :style="{height:data.height}"
  >
    <section class="card__title">
      {{ data.title }}
    </section>
    <section class="card__btBox">
      <section>
        <section
          v-for="(item,i) in data.desc"
          :key="i"
          class="card__description"
        >
          {{ item }}
        </section>
      </section>
      <section
        class="card__echarts"
      >
        <div
          v-if="data.echartId"
          :id="uniqueId"
          :style="data.echartStyle"
        />
        <img
          v-if="data.echartImg"
          :src="data.echartImg"
          :style="data.echartStyle"
        >
      </section>
    </section>
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref, watch } from "vue";

import * as echarts from 'echarts';

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  index: Number,
});

const myChart = ref<any>(null);
const uniqueId = ref('');
const generateUniqueId = () => `echart-${props.index}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
const initBar = () => {
  let chartDom = document.getElementById(uniqueId.value);
  if (!chartDom) {
    console.warn('Chart container not found');
    return;
  }

  // 先销毁之前的实例
  if (myChart.value) {
    myChart.value.dispose();
    myChart.value = null;
  }

  myChart.value = echarts.init(chartDom);
  let option;

  option = props.data.echarts;

  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
  option && myChart.value.setOption(option);
};

watch(() => props.data.echartId, (newVal) => {
  nextTick(() => {
    if (newVal) {
      uniqueId.value = generateUniqueId();
      setTimeout(() => {
        initBar();
      }, 100); // 添加微小延迟确保DOM更新完成
    }
  });
}, {
  immediate: true,
  deep: true
});
</script>
<style scoped lang="scss">
.card {
  width: 100%;
  background-image: url("@/assets/detail_bg01.png");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 17px 20px;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 12px;

  &.height200 {
    height: 200px;
  }

  .card__title {
    font-family: Source Han Sans;
    font-size: 28px;
    font-weight: 500;
    color: #08FBFF;
    margin-bottom: 16px;
  }

  .card__btBox {
    display: flex;
    justify-content: space-between;

    .card__description {
      font-family: Source Han Sans;
      font-size: 20px;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 26px;
      text-align: justify;
    }
  }

}
</style>
